/**
 * 对齐工具
 * @Author: zhangshubin
 * @Date: 2023-12-08 16:48:01
 * @Last Modified by: zhangshubin
 * @Last Modified time: 2023-12-21 18:14:39
 * */
import IconButton from '@/components/Icon'
import alignLeftThin from '@iconify/icons-ph/align-left-thin'
import alignCenterHorizontalThin from '@iconify/icons-ph/align-center-horizontal-thin'
import alignRightThin from '@iconify/icons-ph/align-right-thin'
import alignTopThin from '@iconify/icons-ph/align-top-thin'
import alignCenterVerticalThin from '@iconify/icons-ph/align-center-vertical-thin'
import alignBottomThin from '@iconify/icons-ph/align-bottom-thin'
import caretDownFill from '@iconify/icons-ph/caret-down-fill'
import distributeHorizontalOutline from '@iconify/icons-teenyicons/distribute-horizontal-outline'
import distributeVerticalOutline from '@iconify/icons-teenyicons/distribute-vertical-outline'
import { Icon } from '@iconify/react'
import { Col, Dropdown, InputNumber, MenuProps, Row, Space } from 'antd'
import { useEffect, useState } from 'react'
import EditorExecutor from '@/executor/EditorExecutor'
import { mxCell } from 'mxgraph'
import { PropsBarState } from '@/types/index'

const distributeItems: MenuProps['items'] = [
  {
    label: <span className="font-size-12px">水平均匀分布</span>,
    icon: <Icon icon={distributeHorizontalOutline} />,
    key: '0'
  },
  {
    label: <span className="font-size-12px">垂直均匀分布</span>,
    icon: <Icon icon={distributeVerticalOutline} />,
    key: '1'
  }
]

interface IAlginSettingProps {
  cells?: mxCell[]
  cellState: PropsBarState
}

export default function AlginSetting(props: IAlginSettingProps) {
  // 对齐按钮是否可用
  const [alignBtnDisable, setAlignBtnDisable] = useState(true)
  // 分布按钮是否可用
  const [distriBtnDisable, setDistriBtnDisable] = useState(true)
  // 透明度
  const [opacity, setOpacity] = useState(100)

  useEffect(() => {
    // 根据选中的cell数据，决定允许对齐操作
    const cNum = props.cells?.length || 0
    if (cNum == 0) {
      setAlignBtnDisable(true)
      setDistriBtnDisable(true)
      return
    } else if (cNum > 1) {
      setAlignBtnDisable(false)
    }
    if (cNum > 2) {
      setDistriBtnDisable(false)
    }
  }, [props.cells])

  useEffect(() => {
    const { style } = props.cellState
    if (style.opacity != null) {
      setOpacity(parseInt(style.opacity))
    }
  }, [props.cellState])

  return (
    <Space direction="vertical" size="small" style={{ display: 'flex' }}>
      <div className="flex flex-justify-between bg-#ffffff pr-5px">
        <IconButton
          icon={alignLeftThin}
          tip="左对齐"
          className="h-24px w-24px"
          disabled={alignBtnDisable}
          fontSize={20}
          onClick={() => {
            EditorExecutor.alignCells(mxConstants.ALIGN_LEFT)
          }}
        />
        <IconButton
          icon={alignCenterHorizontalThin}
          tip="居中对齐"
          className="h-24px w-24px"
          fontSize={20}
          disabled={alignBtnDisable}
          onClick={() => {
            EditorExecutor.alignCells(mxConstants.ALIGN_CENTER)
          }}
        />
        <IconButton
          icon={alignRightThin}
          tip="右对齐"
          className="h-24px w-24px"
          disabled={alignBtnDisable}
          fontSize={20}
          onClick={() => {
            EditorExecutor.alignCells(mxConstants.ALIGN_RIGHT)
          }}
        />
        <IconButton
          icon={alignTopThin}
          tip="顶端对齐"
          className="h-24px w-24px"
          fontSize={20}
          disabled={alignBtnDisable}
          onClick={() => {
            EditorExecutor.alignCells(mxConstants.ALIGN_TOP)
          }}
        />
        <IconButton
          icon={alignCenterVerticalThin}
          tip="垂直居中对齐"
          className="h-24px w-24px"
          fontSize={20}
          disabled={alignBtnDisable}
          onClick={() => {
            EditorExecutor.alignCells(mxConstants.ALIGN_MIDDLE)
          }}
        />
        <IconButton
          icon={alignBottomThin}
          tip="底部对齐"
          className="h-24px w-24px"
          fontSize={20}
          disabled={alignBtnDisable}
          onClick={() => {
            EditorExecutor.alignCells(mxConstants.ALIGN_BOTTOM)
          }}
        />
        <Dropdown
          trigger={['click']}
          menu={{
            items: distributeItems,
            onClick: ({ key }) => {
              EditorExecutor.distributeCells(key == '0' ? true : false)
            }
          }}
          disabled={distriBtnDisable}
        >
          <Icon
            icon={caretDownFill}
            className={`h-24px w-12px ${distriBtnDisable ? 'opacity-40' : ''}`}
          />
        </Dropdown>
      </div>
      <Row>
        <Col span={10}>不透明度</Col>
        <Col span={14} className="flex flex-justify-end ">
          <InputNumber
            className="h-26px w-100%"
            value={opacity}
            min={0}
            max={100}
            formatter={(value) => `${value}%`}
            parser={(value) => parseInt(value!.replace('%', ''))}
            onChange={(v) => {
              console.log(v)
              if (v != null) {
                setOpacity(v)
              }
            }}
            onStep={(value) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_OPACITY, value)
            }}
            onPressEnter={(e) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_OPACITY, opacity)
            }}
            onBlur={() => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_OPACITY, opacity)
            }}
          />
        </Col>
      </Row>
    </Space>
  )
}
